<template id="help">
    <div>
        <div class="help_top">
            <h3>帮助中心</h3>
            <img src="../image/blue_da.png" alt="" @click="getBack()">
        </div>
        <ul  class="help_list">
            <li><img src="../image/tui.png" alt="">支持售后退款</li>
            <li><img src="../image/bu.png" alt="">不支持补发</li>
            <li><img src="../image/gai.png" alt="">不支持修改地址</li>
        </ul>
        <ul class="help_list9">
            <div  v-for="(item, index) in orders">
				<li @click="isShow(index+1)" v-bind:class="'showIcon_'+(index+1)" data-key="0">
						<span>{{index+1}}、{{item.title}}</span>
						<img src="../image/top.jpg"  alt=""  class="down">
						<img src="../image/xiay.jpg" alt=""  class="up hide">
				</li>
				<li v-bind:class="'hide help_'+(index+1)" >
					<div class="tips"  v-html="item.description" id="tup">
					</div>
				</li>
			</div>		

        </ul>
		 <!--<div class="jia_more" id="page" data-page="1" @click="more()">加载更多</div>-->
        <div class="help_footer">
            <div class="s">
                <p><img src="../image/dianhua.png" alt=""><a href="tel:4001787760">400-178-7760</a></p>
                <p><img src="../image/fuke.png" alt="">联系客服</p>
            </div>
             <span>客服服务时间为每天9:00-23:00</span>
        </div>
    </div>
</template>
<script>
    export default{
        name: 'help',
		data(){
            return{
                orders:[],
				mode:'help'
            }
        },
	    mounted:function(){
			//初始化
			var page    = 1;
			var is_more = 0;
			this.getItems(this.mode,page,is_more);

        },
        methods:{
			isShow:function(key){
				if(!key){
					return false;
				}
				
				var showIcon = ".showIcon_"+key;
				var tips_key = ".help_"+key;
				var code = $(showIcon).attr('data-key'); 
				if(code == 0){
					$(tips_key).show();		
					$(showIcon).attr('data-key',1);
					$(showIcon).find(".up").show();
					$(showIcon).find(".down").hide();
				}else{
					$(tips_key).hide();		
					$(showIcon).attr('data-key',0);
					$(showIcon).find(".up").hide();
					$(showIcon).find(".down").show();
				}
				
            },
			getItems:function(mode,page,is_more){
				if(!page || page == 0){
					page = 1;
				}

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Help.php?mode='+mode+'&page='+page;
                let Data = this.GLOBAL.dataParam();
                
                this.$ajax.post(url,Data).then((res) => {
                        let temp = res.data;
                        if(temp.code == 200){
                        if(is_more){
                            this.GLOBAL.merge_array(this.orders,temp.data);
                            $("#page").attr('data-page',page);
                            
                        }else{
                            this.orders = temp.data;
                        }
                    
                    }else{
                         this.GLOBAL.center_error(this,temp);
                    }
                })
                
			},
			more:function(){
				var page = parseInt($("#page").attr('data-page'));
				page ++;
				var is_more = 1;
				this.getItems(this.mode,page,is_more);
			},
			getBack:function(){
				 window.history.go(-1);
			}
        }
    };
</script>
<style>
	.hide{
		display:none;
	}
    .tips p{
        color:#979797;
    }
   /* #tips p{
color:red;
    }*/
	.tips{
		display: block;
		margin: 10px 20px 10px 20px;
		color: #a9a6a6;
		font-size: 0.24rem;
		height: auto;
		overflow: auto;
		text-indent: 16px;
	}
	.jia_more{
        height:1rem;
        width:100%;
        line-height:1rem;
        text-align:center;
        color:#000000;
        font-size:0.2rem;
    }
    .help_footer a{
	text-decoration: none;
	color: #fff;
     }
    .help_footer span{
        display:block;
        width:100%;
        height:0.27rem;
        line-height:0.27rem;
        text-align:center;
        color:#bababa;
        font-size:0.18rem;
    }
    .help_footer{
        width:100%;
        height:1.35rem;
        background:#f5f5f5;
        position:fixed;
        bottom:0;
        left:0;
    }
    .help_footer .s{
        display:flex;
        height:1.07rem;
        width:100%;
    }
    .help_footer .s p:nth-of-type(2) img{
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        top: 0.12rem;
        left: 0.2rem;
    }
    .help_footer .s p:nth-of-type(1) img{
        display:block;
        width:0.48rem;
        height:0.48rem;
        position:absolute;
        top: 0.12rem;
        left: 0.13rem;
    }
    .help_footer .s p{
        color:#ffffff;
        background:#4ebdff;
        font-size:0.24rem;
        height:0.67rem;
        width:2.72rem;
        line-height:0.67rem;
        text-align:center;
        margin:0.25rem;
        border-radius:0.15rem;
        position:relative;
    }
    /*.help_list9 li p{
        font-size:0.15rem;
        color:#dcdcdc;
        width:5.9rem;
        min-height:0.1rem;
        float:left;

    }*/

    .help_list9 li span{
        display:block;
        width:4.54rem;
        height:0.67rem;
        line-height:0.67rem;
        color:#3b3b3b;
        font-size:0.24rem;
        float:left;
        text-indent: 0.24rem;

    }
    .help_list9 li img:nth-of-type(2){
        width:0.25rem;
        height:0.14rem;
        position:absolute;
        top:0.28rem;
        right:0.25rem;
    }
    .help_list9 li img:nth-of-type(1){
        width:0.25rem;
        height:0.14rem;
        position:absolute;
        top:0.28rem;
        right:0.25rem;
    }
    .help_list9 li{
        width:100%;
        min-height:0.67rem;
        border-bottom:0.01rem solid #f0f0f0;
        position:relative;
        list-style:none;
    }
    .help_list9{
        width:100%;
        min-height:6rem;
    }
    .help_list{
        border-bottom:0.1rem solid #f5f4f2;
        width:100%;
        height:1.1rem;
        display:flex;

    }
    .help_list li img{
        position:absolute;
        display:block;
        width:0.48rem;
        height:0.48rem;
        left:0.85rem;
        top:0.1rem;

    }
    .help_list li{
        flex:1;
        color:#747474;
        font-size:0.22rem;
        list-style:none;
        position:relative;
        line-height:1.6rem;
        text-align:center;
    }
    .help_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#2eaffc;
        font-size:0.28rem;
        font-weight:normal;
    }
    .help_top img{
        display:block;
        position:absolute;
        height:0.36rem;
        width:0.36rem;
        left:0.27rem;
        top:0.15rem;
    }
    .help_top{
        width:100%;
        height:0.79rem;
        border-bottom:0.01rem solid #f0f0f0;
        position:relative;
    }
</style>
